<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <div @click="divClick">
      我是div文字
      <!-- 如果要阻止事件冒泡, 那么就给事件添加修饰符.stop -->
      <button @click.stop="btnClick">我是btn文字</button>

      <!-- 既想要阻止事件冒泡, 又想要阻止标签的默认行为, 那么就需要串联修饰符 -->
      <a href="http://www.baidu.com" @click.stop.prevent="aClick">百度一下</a>
    </div>

    <!-- 如果要阻止标签的默认行为, 就给事件添加修饰符.prevent -->
    <a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a>

    <!-- 如果只当事件是从特定的键触发时才触发回调, 那么就用键修饰符, 也可以用键的ASCII码 -->
    <input type="text" @keyup.enter="enterOn">
    <input type="text" @keyup.13="enterOn">

    <!-- 如果想要事件只执行一次, 那么就用修饰符.once -->
    <button @click.once="btnClick">只能点击一次</button>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      methods: {
        divClick() {
          console.log("divClick");
        },
        btnClick() {
          console.log("btnClick");
        },
        aClick() {
          console.log("aClick");
        },
        enterOn() {
          console.log("enterOn");
        }
      }
    })
  </script>
</body>

</html>